<template>
  <div id="building">
    <el-card class="box-card">
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm">
        <h3 class="title">登录系统</h3>
        <el-form-item label="用户名" prop="usersid" class="item">
          <el-input v-model="ruleForm.usersid"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password" class="item">
          <el-input type="password" v-model="ruleForm.password"></el-input>
        </el-form-item>
        <el-form-item>
          <el-radio v-model="ruleForm.role" :label="0" style="color: dodgerblue">管理员</el-radio>
          <el-radio v-model="ruleForm.role" :label="1" style="color: dodgerblue">用户</el-radio>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="Login()">登录</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
  import User from "./user";
  import router from "../router";
  import crypto from 'crypto'  //引入依赖
  export default {
    data() {
      return {
        form: {role: 1},
        ruleForm: {
          usersid: '',
          password: '',
          role: '',
        },
        rules: {
          usersid: [
            {required: true, message: '请输入用户名', trigger: 'blur'},
          ],
          password: [
            {required: true, message: '请输入密码', trigger: 'blur'},
          ],
        }
      };
    },
    methods: {
      Login() {
        var me = this;
        const md5 = crypto.createHash('md5')
        md5.update(this.ruleForm.password)
        let md5password = md5.digest('hex')  //md5password为加密后的内容，可直接传递给后端
        console.log(md5password);
        this.$http({
          url: "login",
          params: {
            id: this.ruleForm.usersid,
            pwd: md5password,
            role: this.ruleForm.role,
          },
          method: "post"
        }).then((response) => {
          console.log(response.data)
          if (response.data && this.ruleForm.role == 0) {
            me.$router.push({
              path: '/admin',
              query: {usersid: sessionStorage.getItem('userid')}
            })
          } else if (response.data && this.ruleForm.role == 1) {
            me.$router.push({
              path: '/udp',
              query: {usersid: sessionStorage.getItem('userid')}
            })
          } else {
            this.$alert('密码错误或者身份选择错误！', '密码错误或者身份选择错误！', {
              confirmButtonText: '确定',
            })
          }
        })
      }
    },
  }
</script>

<style scoped>
  .box-card {
    margin: 50px auto;
    width: 500px;
    background-color: rgb(255, 255, 255);
  }

  .title {
    font-family: "Copperplate";
    font-size: 30px;
  }

  .item .el-form-item__label {
    color: white;
    font-size: 16px;
  }

  .el-card {
    border-radius: 20px;
  }

  html, body, #building {
    margin: 0px;
    height: 100%;
  }

  #building {
    width: 100%;
    height: 100%;
    background: url("../assets/1.jpg");
    background-size: cover; /* 使图片平铺满整个浏览器（从宽和高的最大需求方面来满足，会使某些部分无法显示在区域中） */
    position: absolute; /* 不可缺少 */
    /* overflow: hidden; */
    /* overflow: auto; */
    z-index: -1;
    background-repeat: no-repeat;
  }


</style>

